<template>
	<Layout 
		:showLoading="state.showLoading"
		:showLoadErr="state.showLoadErr" 
		:showNoListData="state.dataList.length == 0 && !state.isMore" 
		@toRelaodData="toRelaodData">
		<view class="my-opinion">
			<view class="show-list">
				<view class="item-card" v-for="(item, idx) in state.dataList" :key="idx">
					<view class="item-status-icon"> 
						<image v-if="item.status == '2'" src="../../static/had-handle.png"  mode=""></image>
						<image v-else src="../../static/wait-handle.png" mode=""></image>
					</view>
					<view class="item-card-line"></view>
					<view class="item-user-content">
						<view class="item-apply-time">
							<view class="item-time-icon"> <image src="../../static/date-icon.png" mode=""></image> </view>
							<view class="item-time-txt">{{item.createTime}}</view>
						</view>
						<view class="item-form-show">
							<text class="item-label">来源：</text>
							<text class="item-value">{{item.origin}}</text>
						</view>
						<view class="item-form-show">
							<text class="item-label">类型：</text>
							<text class="item-value">{{item.adviceType}}</text>
						</view>
						<view class="item-user-desc">{{item.adviceMsg}}</view>
						<view class="item-img-box" v-for="(val, i) in item.imgList" :key="i">
							<image :src="val" mode="widthFix"></image>
						</view>
					</view>
					<view class="item-result-content" v-if="item.status == '2'">
						<view class="item-result-label">
							<view class="item-result-icon"> <image src="../../static/handle-icon.png" mode=""></image> </view>
							<view class="item-result-label-txt">处理结果</view>
						</view>
						<view class="item-form-show">
							<text class="item-label">回复时间：</text>
							<text class="item-value">{{item.updateTime}}</text>
						</view>
						<!-- <text class="item-content-txt" decode>
							{{item.resultContent}}
						</text> -->
						<div class="item-content-txt" v-html="item.resultContent"></div>
					</view>
				</view>
			</view>
			
			<NoMore />
		</view>
		
	</Layout>
</template>

<script setup lang="ts">
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
	import { reactive } from 'vue'
	import { toWxLogin } from '@/common/tool'
	import Layout from '@/components/layout.vue'
	import NoMore from '@/components/noMore.vue'
	
	const state = reactive({
		showLoading: false,
		showLoadErr: false,
		isDataLoad: false,
		isMore: true,
		dataList: [] as any,
		pageNum: 1,
		pageSize: 10,
	})
	
	const toRelaodData = () => {
		state.pageNum = 1
		state.isMore = true
		state.showLoadErr = false
		state.dataList = []
		getDataList()
	}
	
	const getDataList =  async (type?: string) => {
		if(!state.showLoading && state.pageNum == 1) {
			state.showLoading = true
		}
			
		if(state.isDataLoad) {
			return
		}
		state.isDataLoad = true
		
		let deptId = window.sessionStorage.getItem('deptId') || ''
		
		let res = await uni.$api.myAdviceList({
			deptId,
			pageNum: state.pageNum,
			pageSize: state.pageSize,
		})
		if(res) {
			let { data } = res
			
			data.forEach((item: any) => {
				if(item.images) {
					item.imgList = item.images.split(';')
				}else {
					item.imgList = []
				}
				
				if(item.resultContent) {
					item.resultContent = item.resultContent.replace(/<img/ig, '<img style="width: 100%;height: auto;"')
				}else {
					item.resultContent = ''
				}
				
			})
			
			if(type == 'refresh') {
				state.pageNum = 1
				state.dataList = data
				if(data.length < state.pageSize) {
					state.isMore = false
				}else {
					state.pageNum++
				}
			}else {
				if(data.length < state.pageSize) {
					state.dataList.push(...data)
					state.isMore = false //没有更多了
				}else {
					state.dataList.push(...data)
					state.pageNum++
				}
			}
			
		}else {
			if(state.pageNum == 1) {
				state.showLoadErr = true
			}
			state.isMore = false
		}
		
		state.isDataLoad = false
		setTimeout(() => {
			state.showLoading = false
		}, 200)
	}
	
	onReachBottom(() => {
		if(state.isMore && !state.isDataLoad) {
			this.getDataList()
		}
	})
	
	onShow(() => {
		let token = window.sessionStorage.getItem('token')
		if(token) {
			getDataList('refresh')
		}
	})
	
	onLoad(() => {
		let token = window.sessionStorage.getItem('token')
		if(!token) {
			uni.reLaunch({
				url: '/pages/giveAdvice/giveAdvice'
			})
		}
	})
	
</script>

<style scoped lang="scss">
	.my-opinion {
		padding-top: 16rpx;
		padding-bottom: 100rpx;
	}
	.show-list {
		padding: 0 8rpx;
		.item-card {
			border-radius: 4rpx;
			background-color: $theme-white;
			box-shadow: 0 2rpx 8rpx 6rpx rgba(0,0,0,0.08);
			margin-bottom: 32rpx;
			position: relative;
			.item-card-line {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 4rpx;
				background-color: $theme-blue;
			}
			.item-status-icon {
				position: absolute;
				top: 64rpx;
				right: 20rpx;
				width: 120rpx;
				height: 120rpx;
			}
			.item-user-content {
				padding: 28rpx 16rpx 20rpx;
				border-bottom: 1px dotted $theme-border;
			}
			.item-apply-time {
				display: flex;
				align-items: center;
				.item-time-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx
				}
				.item-time-icon {
					font-size: 26rpx;
					color: $theme-font;
					line-height: 44rpx;
				}
			}
			.item-form-show {
				font-size: 30rpx;
				line-height: 44rpx;
				color: $theme-font;
				margin-top: 16rpx;
			}
			.item-user-desc {
				font-size: 32rpx;
				color: $theme-black;
				line-height: 56rpx;
				margin-top: 12rpx;
				font-weight: 500;
			}
			.item-img-box {
				margin-top: 16rpx;
			}
			.item-result-content {
				width: 100%;
				padding: 28rpx 16rpx 20rpx;
			}
			.item-result-label {
				display: flex;
				align-items: center;
				.item-result-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx
				}
				.item-result-label-txt {
					font-size: 26rpx;
					color: $theme-blue;
					line-height: 44rpx;
				}
			}
			.item-content-txt {
				width: 100%;
				font-size: 32rpx;
				color: $theme-black;
				line-height: 56rpx;
				margin-top: 12rpx;
				display: inline-block;
				font-weight: 500;
			}
		}
	}
</style>

<style lang="scss">
	.item-content-txt {
		width: 100%;
	}
	.item-content-txt img{
		width: 100%;
		height: auto;
	}
</style>